<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户注册</title>
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/lib/layui/layui.js}"  charset="utf-8"></script>

    <style>
        .code {
            width: 50px;
        }

        .layui-btn {
            display: inline-block;
            vertical-align: middle;
            padding: 12px 24px;
            margin: 0;
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            color: #fff;
            background-color: #23b7e5;
            border-radius: 3px;
            border: none;
            -webkit-appearance: none;
            outline: 0;
            width: 100%
        }
    </style>
</head>
<body class="login-bg">
<div class="login">
    <div class="message">用户注册</div>
    <div id="darkbannerwrap"></div>
    <form method="post" class="layui-form">
        <input id="username" name="account" placeholder="用户名" type="text" lay-verify="required" class="layui-input">
        <hr class="hr15">
        <input id="password" name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
        <hr class="hr15">
        <input name="email" id="email" lay-verify="required" placeholder="邮箱账号" type="text" class="layui-input">
        <hr class="hr15">
        <input name="adr" id="adr" lay-verify="required" placeholder="输入验证码" type="text" class="code"
               style="width: 110px;height:30px;">
        <input type="button" id="second" value="获取验证码"/>
        <hr class="hr15">
        <input value="注册" lay-submit lay-filter="login" style="width:100%;" class="layui-btn">
        <hr class="hr20">
        <a href="javascript:history.back(-1)">返回</a>
        <input type="text" id="Text" value="" style="visibility:hidden"></input
    </form>
</div>
<script layout:fragment="js">
    $('#second').click(function () {
        email();
    });
    var admin;  //储存验证码
    layui.use(['form'],
        function () {
            $ = layui.jquery;
            var form = layui.form(),
                layer = layui.layer;
            form.on('submit(login)', function (data) {
                var data = data.field;
                var adr = $("#adr").val();
                if (adr == admin) {
                    $.ajax({
                        type: "post",
                        url: "/account",
                        data: data,
                        dataType: "json",
                        success: function (data) {
                            if (data == true) {
                                if (confirm("注册成功!")) {
                                    window.location.href = "/tologin";
                                }
                            } else {
                                alert("注册失败!");
                            }
                        }
                    })
                } else {
                    alert("验证码输入错误!");
                }
                return false;
            });
        });

    function email() {
        var email = $("#email").val();
        $.ajax({
            type: "GET",
            url: "/email",
            data: {
                "email": email
            },
            dataType: "json",
            success: function (data,) {
                admin = eval("(" + data + ")");
                liusi(data)
            },
            error: function () {
                alert("操作错误!");
            }
        });
    }

    function getRedisKey() {
        $.ajax({
            url: "/getrediskey",
            type: "GET",
            dataType: "json",
            success: function (data) {
                console.info(("yzm" + data))
            }
        })
    }

    function liusi(yzm) {
        $.ajax({
            type: "GET",
            url: "/register",
            data: {yzm: yzm},
            async: false,
            dataType: "json",
            success: function (data) {
                setInterval(function () {
                    console.log(admin)
                    if (data == 0) {
                        $("#second").prop('disabled', false);
                        $("#second").val("重新获取验证码");
                        data = 0;//计时器初始化;
                        admin = undefined;
                        return
                    } else {
                        $("#second").attr('disabled', true);
                        $("#second").val("(" + data + ")s后重新发送");
                        data--;
                    }
                }, 1000); //每1000毫秒执行一次
            },
            error: function () {
                alert("异常!");
            }
        });
    }

</script>
</body>
</html>